<template>
    <div id="app">
        <Nav></Nav>
        <div class="Nav-box">

        </div>
        <div class="center-box">
            <div class="left-menus">
                <div class="header">
                    <div class="head-img-box">
                        <img src="../../assets/user/cat.jpg" alt="">
                    </div>
                    <p class="userName">{{userName}}</p>
                </div>
                <div class="list-box">
                    <div class="select selectDOM">
                        <div class="render">

                        </div>
                    </div>
                    <div class="list listDOM">
                        <font-awesome-icon icon="user-circle"/>
                        个人信息
                    </div>
                    <div class="list listDOM">
                        <font-awesome-icon icon="map"/>
                        地址管理
                    </div>
                    <div class="list listDOM">
                        <font-awesome-icon icon="sticky-note"/>
                        我的订单
                    </div>
                    <div class="list listDOM" @click="jumpF('/ShoppingCart.html')">
                        <font-awesome-icon icon="shopping-cart"/>
                        购物车
                    </div>
                </div>
            </div>
            <div class="content-box content-boxDOM">
                <div class="user-detail">
                    <div class="cont">
                        <div class="tit">
                            <p>个人信息</p>
                            <p>PERSONAL INFORMATION</p>
                        </div>
                        <div class="detail">
                            <div class="name">
                                昵称: <span>{{userName}}</span>
                                <font-awesome-icon class="edit" @click="showModel(['昵称:text'],'修改昵称')"
                                                   icon="pencil-alt"/>
                            </div>
                            <div class="pw">
                                密码: <span>********</span>
                                <font-awesome-icon class="edit" @click="showModel(['原密码:text','新密码:text'],'修改密码')"
                                                   icon="pencil-alt"/>
                            </div>
                            <div class="tel">
                                邮箱: <span>{{userEmail}}</span>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="user-site">
                    <table>
                        <tr>
                            <th>收货人</th>
                            <th>所在地</th>
                            <th>详细地址</th>
                            <th>手机</th>
                            <th>邮箱</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="item in siteData" :key="item.addressId">
                            <td>{{item.receiverName}}</td>
                            <td>{{item.province+' '+item.city}}</td>
                            <td>{{item.addressDetail}}</td>
                            <td>{{item.addressTel}}</td>
                            <td>{{item.addressEmail}}</td>
                            <td>
                                <font-awesome-icon class="edit"
                                                   @click="showModel(['收货人:text','省:select','市:select','详细地址:text','手机:text','邮箱:text'],'修改地址',item.addressId)"
                                                   icon="pencil-alt"/>
                                |
                                <font-awesome-icon class="del" @click="showOption(item.addressId,'删除地址')" icon="trash"/>
                            </td>
                        </tr>
                    </table>
                    <div class="add-siteBtn"
                         @click="showModel(['收货人:text','省:select','市:select','详细地址:text','手机:text','邮箱:text'],'添加新地址')">
                        添加新地址
                    </div>
                </div>
                <div class="user-order">
                    <table>
                        <tr>
                            <th>订单号</th>
                            <th>收货人</th>
                            <th>日期</th>
                            <th>金额</th>
                            <th>联系电话</th>
                            <th>详细地址</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="v in orderData" :key="v.orderId">
                            <td>{{v.orderId}}</td>
                            <td>{{v.userName}}</td>
                            <td>{{v.time.substring(0,10)}}</td>
                            <td>￥{{v.money}}</td>
                            <td>{{v.userTel}}</td>
                            <td>{{v.province}} {{v.city}}{{v.addressDetail}}</td>
                            <td>
                                {{v.state==0?'未发货':v.state==1?'已发货':v.state==2?'已到达xxx':v.state==3?'正在配送':v.state==4?'已到达未签收':'已签收'}}
                            </td>
                            <td>

                                <font-awesome-icon @click="showOption(v.orderId,'删除订单',v.state)" class="del"
                                                   icon="trash"/>
                            </td>
                        </tr>
                    </table>
                    <div class="order-help" v-if="orderData.length==0">
                        您还没有订单信息~
                    </div>
                </div>
            </div>
        </div>
        <div class="model-background">
            <div class="model-cont">
                <div class="model-tit">
                    标题
                </div>
                <div class="model-input">

                </div>
                <div class="model-sel">
                    <button class="ok">确定</button>
                </div>
                <button class="close">×</button>
            </div>
        </div>
        <div class="model-option">
            <div class="model-cont">
                <div class="tit">是否要删除?</div>
                <div class="option">
                    <button class="yes">确定</button>
                    <button class="no">取消</button>
                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>

</template>

<script>
    import Nav from '../../components/Nav.vue';
    import Footer from '../../components/Footer.vue';

    var scrollEventName = "mousewheel";
    var scrollEventKey = "deltaY";
    var token =localStorage.getItem('token')||'';
    let nameReg = /^[\u4E00-\u9FA5]{1,8}$/;
    if (token==''){
        window.location.href='http://'+window.location.href.split('/')[2];

    }
    if (navigator.userAgent.indexOf('Firefox') != -1) {
        scrollEventName = 'DOMMouseScroll';
        scrollEventKey = "detail"
    }
    let isScroll = true;
    export default {
        name: "App.vue",
        components: {
            Nav,
            Footer
        },
        data() {
            return {
                conIndex: 0,
                submitData: {},
                siteData: [],
                userName: '',
                userEmail: '',
                userID: '',
                orderData: [],
                cityItem: [
                    {
                        province: '四川',
                        city: [
                            '成都',
                            '绵阳',
                            '德阳',
                            '南充',
                            '宜宾',
                            '自贡',
                            '乐山',
                            '泸州',
                            '达州',
                            '内江',
                            '遂宁',
                            '攀枝花',
                            '眉山',
                            '广安',
                            '资阳',
                            '凉山',
                            '广元',
                            '雅安',
                            '巴中',
                            '阿坝',
                            '甘孜',
                            '安岳',
                            '广汉',
                            '简阳',
                            '仁寿',
                            '射洪',
                            '大竹',
                            '宣汉',
                            '渠县',
                            '长宁',
                        ]
                    },
                    {
                        province: '广东',
                        city: [
                            '深圳',
                            '广州',
                            '东莞',
                            '佛山',
                            '中山',
                            '珠海',
                            '惠州',
                            '江门',
                            '汕头',
                            '湛江',
                            '肇庆',
                            '茂名',
                            '揭阳',
                            '梅州',
                            '清远',
                            '阳江',
                            '韶关',
                            '河源',
                            '云浮',
                            '汕尾',
                            '潮州',
                            '台山',
                            '阳春',
                            '顺德',
                            '惠东',
                            '博罗',
                            '海丰',
                            '开平',
                            '陆丰',
                        ]
                    },
                    {
                        province: '直辖市',
                        city: [
                            '北京',
                            '天津',
                            '上海',
                            '重庆',
                        ]
                    }
                ],
            }
        },
        watch: {
            submitData(v) {
                var json = {};
                v.data.forEach(function (item) {
                    if (item.name == '收货人') {
                        json.receiverName = item.value;
                        return;
                    }
                    if (item.name == '省') {
                        json.province = item.value;
                        return;
                    }
                    if (item.name == '市') {
                        json.city = item.value;
                        return;
                    }
                    if (item.name == '详细地址') {
                        json.addressDetail = item.value;
                        return;
                    }
                    if (item.name == '手机') {
                        json.addressTel = item.value;
                        return;
                    }
                    if (item.name == '邮箱') {
                        json.addressEmail = item.value;
                        return;
                    }
                    if (item.name == '昵称') {
                        json.userName = item.value
                        return;
                    }
                    if (item.name == '原密码') {
                        json.originalPassword = item.value;
                        return;
                    }
                    if (item.name == '新密码') {
                        json.newPassword = item.value;
                    }
                });

                if (v.name == '添加新地址') {
                    if (this.siteData.length >= 5) {
                        this.open4('最多添加五条数据哦');
                        return;
                    }
                    this.$axios({
                        url: 'http://129.28.184.223:8080/addAddress',
                        method: 'post',
                        headers: {
                            'token': token,
                        },
                        data: {
                            ...json
                        }
                    }).then((res) => {
                        if (res.data.msg) {
                            this.$message({
                                message: '添加地址成功',
                                type: 'success'
                            });
                            this.getSiteF()
                        }
                    });
                    return;
                }
                if (v.name == '修改地址') {
                    this.$axios({
                        url: 'http://129.28.184.223:8080/altAddress',
                        method: 'post',
                        headers: {
                            'token': token,
                        },
                        data: {
                            addressId: v.dataID,
                            ...json
                        }
                    }).then((res) => {

                        if (res.data.msg) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.getSiteF()
                        }
                    });
                    return;
                }
                if (v.name == '修改昵称') {
                    this.$axios({
                        url: 'http://129.28.184.223:8080/altNickname',
                        method: 'post',
                        headers: {
                            'token': token
                        },
                        data: {
                            ...json
                        }
                    }).then((res) => {
                        if (res.data.msg == 1) {
                            this.getInfo();
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                        }

                    })
                    return;
                }
                if (v.name == '修改密码') {
                    this.$axios({
                        url: 'http://129.28.184.223:8080/altPassword',
                        method: 'post',
                        headers: {
                            'token': token
                        },
                        data: {
                            ...json
                        }
                    }).then((res) => {
                        if (res.data.msg == 1) {
                            this.$message({
                                message: '修改密码成功',
                                type: 'success'
                            });
                            return
                        }
                        if (res.data.msg == -1) {
                            this.open4('原密码错误')
                        }

                    })

                }
                if (v.name == '修改订单') {
                    if (v.state != 0) {
                        this.open4('已发货不能修改')
                    }
                    console.log(v)
                }
            }
        },
        methods: {
            jumpF(v){

           window.location.href='http://'+window.location.href.split('/')[2]+v
            },
            getInfo() {
                this.$axios({
                    method: 'get',
                    url: 'http://129.28.184.223:8080/getInfo',
                    headers: {
                        'token': token
                    }
                }).then((res) => {
                    console.log(res);
                    if (res.data.data) {
                        this.userName = res.data.data.userName;
                        this.userEmail = res.data.data.userEmail;
                        this.userID = res.data.data.userId;
                    }

                });
            },
            getSiteF() {
                this.$axios.get('http://129.28.184.223:8080/getAddress', {
                    headers: {
                        'token': token,
                    }
                }).then((res) => {

                    if (res.data.data.length) {
                        this.siteData = res.data.data;

                    }

                });
            },
            showOption(id, tit, state) {
                var opacity = 0;
                var box = document.getElementsByClassName('model-option')[0];
                var noBtn = box.getElementsByClassName('no')[0];
                var yesBtn = box.getElementsByClassName('yes')[0];
                box.style.display = 'flex';
                var timer = setInterval(() => {
                    console.log(1);
                    opacity += 0.1;
                    box.style.opacity = opacity;
                    if (opacity >= 1) {
                        opacity = 1;
                        clearInterval(timer);
                    }
                }, 16);
                noBtn.onclick = function () {

                    var timer = setInterval(() => {
                        opacity -= 0.1;
                        console.log(1);
                        if (opacity <= 0) {
                            opacity = 0;
                            clearInterval(timer);
                            box.style.display = 'none'
                        }
                        box.style.opacity = opacity;
                    }, 16);

                };
                yesBtn.onclick = () => {
                    if (tit == '删除地址') {

                        this.$axios({
                            url: 'http://129.28.184.223:8080/delAddress',
                            method: 'post',
                            headers: {
                                'token': token,
                            },
                            data: {
                                addressId: id
                            }
                        }).then((res) => {

                            if (res.data.msg) {
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                this.getSiteF()
                            }
                        });
                    }
                    if (tit == '删除订单') {
                        if (state != 0) {

                            this.open4('订单已发货不能取消');
                            return;
                        }
                        this.$axios({
                            url: 'http://129.28.184.223:8080/delAddress',
                            method: 'get',
                            headers: {
                                'token': token,
                            },
                            data: {
                                orderId: id
                            }
                        }).then((res) => {
                            console.log(res)
                        })
                    }

                    var timer = setInterval(() => {
                        opacity -= 0.1;
                        if (opacity <= 0) {
                            opacity = 0;
                            clearInterval(timer);
                            box.style.display = 'none'
                        }
                        box.style.opacity = opacity;
                    }, 16);
                }
            },
            open4(why) {
                this.$message({
                    showClose: true,
                    message: why,
                    type: 'error'
                });
            },
            showModel(inputArr, tit, dataID, state) {
                var getVueThis = this;
                isScroll = false;
                var isClick = true;
                if (inputArr.length) {
                    var einput = document.getElementsByClassName('model-input')[0];

                    einput.innerHTML = '';
                    inputArr.forEach((v) => {
                        var temp = v.split(':');
                        if (temp[1].substring(0, 6) == 'select') {

                            let oSelect = document.createElement("select");
                            let oOpction = document.createElement("option");
                            oOpction.innerHTML = temp[0];
                            oSelect.appendChild(oOpction);
                            oSelect.style.border = 'none';
                            oSelect.style.borderBottom = '1px solid #cccccc';
                            oSelect.style.transition = 'border .2s linear';
                            oSelect.style.marginTop = '10px';
                            oSelect.style.paddingBottom = '10px';
                            oSelect.style.width = '100%';
                            oSelect.style.display = 'block';
                            if (temp[0] == '省') {
                                oSelect.onchange=function(){
                                   var index=this.selectedIndex-1;
                                    var getCityBox = document.getElementById('selCityBox');
                                if (index==-1){
                                    getCityBox.innerHTML='<option>市</option>';
                                    return
                                }

                                    getCityBox.innerHTML = '';
                                    for (var j = 0; j < getVueThis.cityItem[index].city.length; j++) {
                                        let oOpction = document.createElement("option");
                                        oOpction.innerHTML = getVueThis.cityItem[index].city[j];
                                        getCityBox.appendChild(oOpction)
                                    }
                                };
                                for (var i = 0; i < this.cityItem.length; i++) {
                                    let oOpction = document.createElement("option");
                                    oOpction.innerHTML = this.cityItem[i].province;
                                    oSelect.appendChild(oOpction);
                                }

                            }
                            if (temp[0] == '市') {
                                oSelect.id = 'selCityBox';
                            }
                            einput.appendChild(oSelect);
                            return
                        }
                        let oInput = document.createElement('input');
                        oInput.style.borderBottom = '1px solid #cccccc';
                        oInput.style.transition = 'border .2s linear';
                        oInput.style.marginTop = '10px';
                        oInput.style.paddingBottom = '10px';
                        oInput.style.width = '100%';
                        oInput.style.display = 'block';
                        oInput.type = 'input';
                        oInput.placeholder = temp[0];
                        einput.appendChild(oInput)
                    });
                    einput.children.forEach((v) => {
                        v.onfocus = function () {
                            this.style.borderBottom = '1px solid #000001';
                        };
                        v.onblur = function () {
                            this.style.borderBottom = '1px solid #cccccc';
                        }
                    })
                }

                let ele = document.getElementsByClassName('model-background')[0];
                let closeBtn = ele.getElementsByClassName('close')[0];
                let etit = ele.getElementsByClassName('model-tit')[0];
                etit.innerHTML = tit;
                let opacity = 0;
                ele.style.display = 'flex';
                let timer = setInterval(() => {
                    opacity += 0.1;
                    ele.style.opacity = opacity;
                    if (opacity >= 1) {
                        opacity = 1;
                        clearInterval(timer);
                    }
                }, 16);

                function closeF() {
                    isScroll = true;
                    if (isClick == true) {
                        isClick = false;
                        timer = setInterval(() => {
                            opacity -= 0.1;
                            ele.style.opacity = opacity;
                            if (opacity <= 0) {
                                opacity = 0;
                                ele.style.display = 'none';
                                clearInterval(timer);
                            }
                        }, 16);
                    }

                }

                closeBtn.onclick = closeF;
                let oOK = ele.getElementsByClassName('ok')[0];
                oOK.onclick = () => {

                    var PWReg = /^\d{6,18}$/g;
                    var arr = [];
                    var noSelN = 0;
                    einput.children.forEach((v, i) => {
                        var name = inputArr[i].split(':')[0];

                        if (name=='收货人'){
                            if (!nameReg.test(v.value)){
                                setTimeout(() => {
                                    this.open4('收货人只能是一到八位的中文')
                                }, 100);
                                return;
                            }
                        }

                        if (tit == '修改地址' || tit == '修改订单') {
                            if (v.value.trim('')) {
                                if (v.value == '省' && name == '省' || v.value == '市' && name == '市') {
                                    noSelN++;
                                    return;
                                }
                                arr.push({name, value: v.value.trim('')});
                            } else {
                                noSelN++;
                                if (noSelN == inputArr.length) {
                                    this.open4('没有改变任何内容')
                                }
                            }
                            return;
                        }


                        if (name=='手机'){
                            let telReg=/^1[3456789]\d{9}$/;
                            if (!telReg.test(v.value)){
                                setTimeout(() => {
                                    this.open4( '请输入正确的手机号');
                                }, 100);
                                return;
                            }

                        }
                        if (name=='邮箱'){
                            var emailReg =/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
                            if (!emailReg.test(v.value)){
                                setTimeout(() => {
                                    this.open4( '请输入正确的邮箱');
                                }, 100);
                                return;
                            }

                        }

                        if (!v.value.trim('') || (((v.value == '省' && name == '省') || (v.value == '市' && name == '市')) && tit == '添加新地址')) {


                            setTimeout(() => {
                                this.open4(name + '不能为空')
                            }, 100);
                            return
                        }
                        if ((name == '新密码' || name == '原密码')) {
                            var temp = PWReg.test(v.value);
                            PWReg.test(v.value);
                            if (temp) {

                                console.log(1);

                            } else {
                                setTimeout(() => {
                                    this.open4(name + '必须为6-18位数字')
                                }, 100);
                                return;
                            }
                        }

                        arr.push({name, value: v.value.trim('')});
                    });

                    if (arr.length == 0) {
                        return;
                    }
                    var json = {};
                    json.name = tit;
                    json.data = arr;
                    json.dataID = dataID;
                    json.state = state;
                    if (tit == '添加新地址' && arr.length != inputArr.length || tit == '修改密码' && arr.length != inputArr.length) {
                        return
                    }
                    oOK.onclick = null;
                    this.submitData = json;
                    closeF();
                }
            },
        },
        mounted() {
            this.getInfo();
            this.getSiteF();
            this.$axios({
                url: 'http://129.28.184.223:8080/Order/selectOne',
                method: 'post',
                headers: {
                    'token': token
                },
                data: {}
            }).then((res) => {
                if (res.data.data) {
                    this.orderData = res.data.data
                    console.log(this.orderData);
                }
            });
            let sel = document.getElementsByClassName('selectDOM')[0];
            let selH = sel.offsetHeight;
            let contBox = document.getElementsByClassName('content-boxDOM')[0];
            let menus = document.getElementsByClassName('listDOM');
            const Vue = this;
            console.log(contBox);
            let contBoxH = contBox.offsetHeight;

            let renderContF = () => {
                sel.style.top = selH * this.conIndex + 'px';
                contBox.style.top = this.conIndex * -contBoxH + 'px';
            };
            let scrollF = (e) => {
                if (e[scrollEventKey] > 0 && isScroll) {
                    this.conIndex += 1;
                    this.conIndex = this.conIndex > 2 ? 2 : this.conIndex;

                    renderContF();
                    isScroll = this.conIndex == 2 ? true : false
                }
                if (e[scrollEventKey] < 0 && isScroll) {
                    this.conIndex -= 1;
                    this.conIndex = this.conIndex < 0 ? 0 : this.conIndex;
                    renderContF();
                    isScroll = this.conIndex == 0 ? true : false
                }
            };
            menus.forEach((item, i) => {
                item.onclick = function () {
                    if (i <= 2) {
                        Vue.conIndex = i;
                        renderContF()
                    }
                    return false
                };
                item.onselectstart = function () {
                    return false
                }
            });
            window.addEventListener(scrollEventName, scrollF);
            sel.addEventListener('transitionend', function () {
                isScroll = true;
            });
        }
    }
</script>

<style scoped lang="less">
    @import '../../utils/css/reset.css';
    @import '../../theme/style.less';

    .Nav-box {
        height: 100px;
    }

    .model-option {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 99;
        opacity: 0;
        display: none;
        justify-content: center;
        align-items: center;

        .model-cont {
            position: relative;
            padding: 30px;
            background: white;

            .tit {
                font-size: 20px;
                text-align: center;
                line-height: 60px;
            }

            .option {
                width: 150px;

                > button {
                    border: 1px solid #000001;
                    background: #000001;
                    box-shadow: 0 0 0 0 white inset;
                    color: white;
                    font-size: 16px;
                    float: left;
                    padding: 5px 10px;
                    cursor: pointer;
                    transition: all 0.2s ease-in-out;
                }

                .no {
                    float: right;
                }

                > button:hover {
                    box-shadow: 0px 130px 0px 0px white inset;
                    color: black;
                }
            }

        }
    }

    ;
    .model-background {
        opacity: 0;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 99;
        display: none;
        justify-content: center;
        align-items: center;

        .model-cont {
            position: relative;
            padding: 30px;
            background: white;

            .model-tit {
                line-height: 30px;
                font-size: 20px;
                text-align: center;
                width: 200px;
            }

            .model-input {
                input {
                    display: block;
                    border-bottom: 1px solid #cccccc;
                    margin-top: 10px;
                    width: 100%;
                }
            }

            .close {
                position: absolute;
                right: 10px;
                top: 5px;
                background: none;
                color: #999999;
                font-size: 20px;
                cursor: pointer;
                transition: transform .3s linear;
                line-height: 20px;
                width: 20px;
                -webkit-transform-origin: center;
                -moz-transform-origin: 10px 12px;
            }

            .close:hover {
                transform: rotate(180deg);
            }

            .ok {
                background: #000001;
                color: white;
                width: 100%;
                height: 30px;
                margin-top: 20px;
                cursor: pointer;
                box-shadow: 0 0 0 0 white inset;
                transition: all .3s ease-in-out;
                border: 1px solid black;

            }

            .ok:hover {
                box-shadow: 300px 0 0 0 white inset;
                color: black;
            }
        }
    }

    .center-box {

        width: 1200px;
        margin: 0 auto;
        overflow: hidden;

        .content-box {
            transition: top 0.3s ease-in-out;
            width: 855px;
            background: #f1f1f1;
            height: 515px;
            float: left;
            position: relative;
            top: 0;

            .add-siteBtn {
                width: 100px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                background: gray;
                color: white;
                margin: 20px auto 0;
                cursor: pointer;
            }

            .order-help {
                font-size: 18px;
                line-height: 80px;
                height: 80px;
                border-bottom: 1px solid #cccccc;
                color: #999999;
                text-align: center;
            }

            table {
                .edit {
                    cursor: pointer;
                }

                .del {
                    cursor: pointer;
                }

                width: 100%;
                text-align: center;
                border-collapse: collapse;

                tr {
                    line-height: 50px;
                    height: 50px;

                    th {
                        font-weight: normal;
                        background: #cccccc;
                        margin: 0;
                    }

                    td {
                        color: #999999;
                        border-bottom: 1px solid #cccccc;
                    }
                }
            }

            .user-detail {
                width: 855px;
                height: 515px;

                .cont {
                    padding: 50px 100px;

                    .tit {
                        font-size: 25px;
                    }

                    .detail {
                        line-height: 70px;

                        font-size: 14px;
                        color: #575757;

                        > div {
                            height: 70px;
                            border-bottom: 1px solid #575757;
                            position: relative;

                            .edit {
                                position: absolute;
                                right: 0;
                                bottom: 30px;
                                cursor: pointer;
                            }
                        }
                    }
                }
            }
        ;

            .user-site {
                width: 855px;
                height: 515px;
                background: #f1f1f1;

            }

            .user-order {
                width: 855px;
                height: 515px;
                background: #f1f1f1;
            }
        }

        .left-menus {
            width: 345px;
            float: left;
            background: #000001;
            padding-bottom: 80px;

            .header {
                color: white;
                padding-top: 80px;

                .userName {
                    text-align: center;
                    line-height: 30px;
                    height: 30px;
                    font-size: 14px;
                }

                .head-img-box {
                    width: 85px;
                    height: 85px;
                    margin: 0 auto;
                    border-radius: 50%;
                    overflow: hidden;

                    img {
                        width: 85px;
                        height: 85px;
                    }
                }

            }

            .list-box {
                position: relative;

                .select {
                    position: absolute;
                    right: 5px;
                    top: 0;
                    height: 30px;
                    width: 10px;
                    padding-top: 15px;
                    padding-bottom: 15px;
                    transition: top 0.3s linear;

                    .render {
                        height: 30px;
                        background: white;
                    }
                }

                .list {
                    line-height: 60px;
                    height: 60px;
                    color: white;
                    text-align: center;
                    cursor: pointer;
                }

            }
        }

    }

</style>